<template>
    <view class="batchEnterQuestion">
        <scroll-view :scroll-y="true" class="scrollWrap" :style="{ paddingBottom: safeAreaInsets.bottom + 50 + 'px' }">
            <view style="background-color: #F9F9F9;border-radius: 24rpx;padding: 22rpx 34rpx;min-height: 720rpx;position: relative;">
                <textarea v-model="content" :border="'none'" :maxlength="-1" :auto-height="true" style="min-height: 670rpx;width: 100%;"></textarea>
                <view class="flex flex-column placeholderStyle" v-if="onShowPlaceholder">
                        <view style="font-size: 32rpx; font-weight: 500;margin-bottom: 34rpx">内容输入</view>
                        <view class="tipsText">1.请在底部查看[格式案例]</view>
                        <view class="tipsText">2.按照格式要求，调整好试题后，批量复制</view>
                        <view class="tipsText">3.建议一次批量复制50题，进行录入</view>
                </view>
                <view class="flex flex-end">
                    <!-- <text>格式案例</text> -->
                    <text style="color: red;" @click="content=''">清空</text>
                </view>
            </view>
            <view class="menuStyle">
                <view class="flex between smallItem" v-for="item in bottomMenu" :key="item"
                    @click="onHandleBottomMenu(item)">
                    <text :class="item.required ? 'required item-center' : 'noRequired item-center'"
                        style="color: #333;">{{item.text }}</text>
                    <view>
                        <text>{{ onShowBottomText(item.code) }}</text>
                        <image src="../static/images/teachingMaterial/greyLeftArrow.svg"
                            style="width: 16rpx;height: 24rpx;margin-left: 30rpx;" />
                    </view>
                </view>
            </view>
            <view class="bottomStyle">
                <view class="flex" style="margin-bottom: 40rpx;margin-top:20rpx">
                    <view v-for="item in tabList" :key="item.text" class="tabIconStyle" @click="this.type = item.value">
                        <text
                            :style="{ fontWeight: item.value == type ? 'bold' : '', fontSize: item.value == type ? '36rpx' : '32rpx' }">{{
                                item.text }}</text>
                        <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/activeBot.svg" v-if="item.value == type"
                            class="activeIcon" />
                    </view>
                </view>
                <view  class="flex flex-column infoStyle">
                    <view  v-if="type==1">
                        <view v-for="(item,i) in uploadDesc" style="line-height: 50rpx;">{{i+1}}.{{ item }}</view>
                    </view>
                    <view v-else>
                        <view v-for="(item,i) in questionDesc" :style="{lineHeight: '50rpx'}">
                        <!-- <view v-for="(item,i) in questionDesc" :style="{marginTop:i==0?0:'60rpx',lineHeight: '50rpx'}"> -->
                            <view>{{ item.type }}</view>
                            <view>{{ i+1 }}.{{ item.name }}</view>
                            <view v-for="(it,i) in item.optionArr">
                                <text>{{ letterNumber[i] }}、</text>
                                <text>{{ it }}</text>
                            </view>
                            <view>答案:{{ item.answer }}</view>
                            <view>解析:{{ item.analysis }}</view>
                            <view v-if="i+1<questionDesc.length">###</view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 选择难度 -->
            <BotMenu :isPopup="isSelectDifficultyPopup" @close="isSelectDifficultyPopup = false" title="试题难度">
                <view v-for="item in questonDifficulty" :key="item.value" class="selectTypeItem"
                    :style="{ color: selectQuestDiff.value == item.value ? '#37B874' : '#000' }"
                    @click="onSelectQustion(item, 'selectDiff')">
                    {{ item.text }}
                </view>
            </BotMenu>
        </scroll-view>
        <view class="bottomBtn" :style="{ bottom: safeAreaInsets.bottom + 'px' }" @click="onSave">
            <!-- <image src="../static/images/showIcon.svg" style="width: 48rpx;height: 48rpx;margin-right: 22rpx;" /> -->
            <text>添加试题</text>
        </view>
        <!-- 选择知识机构 -->
        <SelectknowledgePopup 
            :isPopup="isSelectknowledgePopup" 
            @close="isSelectknowledgePopup = false" 
            @onSelect="onSelectKnowledge"
            title="知识结构" 
            :subjectUuid="pInfo.subjectUuid"
            :showCancel="true"/>
    </view>
</template>

<script>
import {QUESTION_DIFFICULTY,uploadDesc ,questionDesc,LETTER_Number} from '../data/TestQuestionsType'
import { notificationFun } from '../utils/PrjUtils';
import {batchSaveTheoryItem, saveTheoryItem}from "./services/myQuestionBankService"
export default {
    name: 'BatchEnterQuestion',
    data() {
        return {
            // 底部试题操作
            bottomMenu: [
                { text: "选择章节", code: "select", required: true },
                { text: "试题难度", code: "andu", required: true },
                { text: "编辑章节", code: "editZj", required: false },
            ],
            // 试题难度
            isSelectDifficultyPopup: false,
            // 选择试题的难度
            selectQuestDiff: {},
            // 试题难度
            questonDifficulty: QUESTION_DIFFICULTY,
            // tab信息
            tabList: [{ text: "上传说明", value: 1 }, { text: "上传示例", value: 2 }],
            // 底部切换的值
            type: 1,
            // 安全区域
            safeAreaInsets: { bottom: 0 },
            // 默认提示
            uploadDesc:uploadDesc,
            // 默认题型
            questionDesc:questionDesc,
            // 字母
            letterNumber:LETTER_Number,
            // 内容
            content:"",
            // 弹出选择知识机构
            isSelectknowledgePopup: false,
            // 上层数据
            pInfo: {},
            // 选择的知识结构数据
            selectKnowledgeData:{}

        };
    },
    methods: {
        // 操作底部操作
        onHandleBottomMenu(record) {
            switch (record.code) {
                // 选择章节
                case "select":
                    this.isSelectknowledgePopup=true;
                    break;
                // 试题难度
                case "andu":
                    this.isSelectDifficultyPopup = true;
                    break;
                // 编辑章节
                case "editZj":
                uni.navigateTo({
                        url: `/myQuestionBank/addQuestionBank?info=${encodeURIComponent(JSON.stringify({...this.pInfo,title:"编辑章节"}))}`
                    })
                    break;
                default:
                    break;
            }
        },
        // 显示选择的数据
        onShowBottomText(type) {
            if (type == "andu") {
                return this.selectQuestDiff.text || ""
            }
            else if (type == "select") {
                return this.selectKnowledgeData.name || ""
            }
            else {
                return ""
            }
        },
        // 选择试题
        onSelectQustion(item, type) {
            if (type == "selectDiff") {
                this.selectQuestDiff = item;
                this.isSelectDifficultyPopup = false;
            }
        },
        // 选择的知识机构
        onSelectKnowledge(record){
            this.selectKnowledgeData = record
            this.isSelectknowledgePopup = false
        },
        //保存
        onSave(){
            if(!this.selectKnowledgeData.structId){
                return notificationFun("请选择章节")
            }
            else if(!this.selectQuestDiff.value){
                return notificationFun("请选择试题难度")
            }
            else if(!this.content){
                return notificationFun("请输入试题内容")
            }
            let param={
                structId:this.selectKnowledgeData.structId,
                difficulty:this.selectQuestDiff.value,
                content:this.content,
                subjectUuid:this.pInfo.subjectUuid,
            }
            batchSaveTheoryItem(param).then(res => {
                notificationFun("操作成功");
                // 重置数据
                this.resetData()
            })
            
        },
        // 重置数据
        resetData(){
            this.selectKnowledgeData={}
            this.selectQuestDiff={}
            this.content=""
        }
    },
    mounted() {
        // Add your mounted logic here
    },
    onLoad(option) {
        let info = JSON.parse(decodeURIComponent(option.info)) || {}
        this.pInfo = info
    },
    beforeMount() {
        uni.getSystemInfo({
            success: (res) => {
                console.log(res.safeAreaInsets)
                // this.windowWidth = res.windowWidth
                // this.windowHeight = res.windowHeight
                this.safeAreaInsets = res.safeAreaInsets
            }
        })
    },
   computed:{
        onShowPlaceholder(){
            return this.content?false:true
        }
    }
};
</script>

<style scoped lang="scss">
.batchEnterQuestion {
    .scrollWrap {
        background-color: #fff;
        box-sizing: border-box;
        height: 100vh;
        padding: 30rpx;
        .tipsText{
            line-height: 48rpx;
            color: #333333;
            font-size: 28rpx;

        }
        .placeholderStyle{
            position: absolute;
            top: 20rpx;
        }
        .menuStyle {
            margin: 50rpx 0;

            .smallItem {
                padding: 27rpx 0 32rpx 0;
                border-bottom: 1px solid #F2F2F2;
            }

            .required:before {
                display: inline-block;
                margin-right: 8rpx;
                content: "*";
                line-height: 1;
                font-size: 32rpx;
                color: #f04134;
            }

            .noRequired:before {
                display: inline-block;
                margin-right: 8rpx;
                content: "*";
                line-height: 1;
                font-size: 32rpx;
                color: transparent;
            }
        }


        .selectTypeItem {
            display: flex;
            justify-content: center;
            padding: 32rpx 0;
            border-bottom: 1rpx solid #eee;
        }

        .tabIconStyle {
            color: #666;
            font-size: 32rpx;
            position: relative;
            margin-right: 46rpx;

            .active {
                font-size: 36rpx;
                font-weight: 500;
            }

            .activeIcon {
                width: 72rpx;
                height: 50rpx;
                position: absolute;
                top: 24rpx;
                left: 50%;
                color: #000;
                transform: translateX(-50%);
            }
        }
        .infoStyle{
            padding: 44rpx;
            background-color: #F2F2F2;
            border-radius: 24rpx;
            .qustItem{
                
            }
        }
    }

    .bottomBtn {
        width: calc(100% - 60rpx);
        display: flex;
        align-items: center;
        justify-content: center;
        height: 90rpx;
        box-shadow: 0px 1px 8px 0px #00000014;
        border-radius: 24rpx;
        position: absolute;
        left: 30rpx;
        background-color: #37B874;
        color: #fff;
    }
}
</style>